<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：知己彼-对比页面中选择产品
 参数：需要从父组件中传递组件中默认显示的文字
 事件：点击输入框输入进行模糊查询
-->
<template>
  <div class="select-product">
    <div class="select-brand">
      <div @click="showProductA($event)">
        <div class="text-center btn btn-addProduct pt100">添加产品+</div>
      </div>
    </div>
    <!--点击选择产品A后弹出窗口-->
    <!--点击选择产品A后弹出窗口-->
    <div class="product-list" v-show="productAOpenStatus">
      <div>
        <ul class="productList-brand">
          <li v-for="item in brands | filterBy KeyWordsA" @click="changeBrandA(item)"
              :class="[{'brand-active': brandActiveIndex == item}]">{{item}}
          </li>
        </ul>
        <div class="productList-product ">
          <div class="thead display-flex">
            <div v-for="item in thead" class="flex1">{{item}}</div>
          </div>
          <div class="tbody">
            <table>
              <tr v-for="row in tableRows | filterBy KeyWordsA" @click="chooseProductA(row, $event)">
                <td v-for="item in gridColumns" v-html="row[item]" :id="$parent.$index">
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TableView1 from '../common/TableView1.vue'
  export default{
    props: ['productList', 'defaultCategoryId'],
    components: {
      TableView1
    },
    data () {
      return {
        productAOpenStatus: false,
        productBOpenStatus: false,
        brands: [],
        tableTitle: '',
        tableRows: [],
        gridColumns: ['model', 'sale', 'all_comment'],
        thead: ['型号', '销量', '评论'],
        brandActiveIndex: 0,
        brandBctiveIndex: 0,
        activeSelectIndex: 0,
        UrlParams: {
          refresh: true,
//          username: 'shisj',
          startTime: '',
          endTime: '',
          category_id: '',
          brand: '',
          brand1: '',
          brand2: '',
          nobrand: false, // true 则不返回品牌 false 返回品牌
          model1: '',
          model2: '',
          product: '',
          competition: false, // true 为产品B  false 为产品A
          model_id: '',
          includeCollect: true, // 是否包含收藏的品牌
          condition: '',
          sale_price: '',
          sale: '',
          all_comment: '',
          bad_comment: ''
        }
      }
    },
    methods: {
//      显示产品的选择窗口
      showProductA: function (event) {
        this.productAOpenStatus = !this.productAOpenStatus
        this.productBOpenStatus = false
        this.getBrandA(this.UrlParams)
      },
//      选择产品窗口中的某个品牌
      changeBrandA: function (item) {
        this.brandActiveIndex = item
        this.UrlParams.brand = item
        this.getProductA(this.UrlParams)
      },
      chooseProductA: function (row, event) {
        this.productAOpenStatus = false
        this.selectAText = row.brand + row.model
        // 将选择的产品A传递到父组件中，用于请求新数据
        this.$dispatch('chooseProductA', row)
        this.UrlParams.model1 = this.selectAText
      },
      getBrandA: function (params) {
        var _this = this
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          var data = res.json()
          _this.brands = data.brands
          _this.tableRows = data.products
          _this.brandActiveIndex = data.brands[0]
        })
      },
      getProductA: function (params) {
        var _this = this
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          var data = res.json()
          _this.tableRows = data.products
        })
        this.$http.post(window.interface.loadProducts, params).then(function (res) {
          var data = res.json()
          _this.tableRows = data.products
        })
      }
    },
    ready: function () {
//      阻止input框冒泡，否则会导致点击input时窗口关闭
      var inputEle = document.querySelectorAll('.input-search')
      for (var i = 0; i < inputEle.length; i++) {
        inputEle[i].addEventListener('click', function (event) {
          event.stopPropagation()
        })
      }
    },
    watch: {
      'defaultCategoryId': function (newV) {
        setTimeout(() => {
          this.UrlParams.category_id = newV
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn-addProduct {
    margin: .2rem auto;
    width: 90%;
    height: 38px;
    line-height: 38px;
    border-radius: 3px;
    border: 1px solid #e4e4e4;
    color: #4A90E2;
    font-size: 18px;
  }

  .select-product {
    text-align: center;
  }

  .brand-active {
    background: skyblue;
    color: #fff;
    border-right: none;
  }

  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .input-search {
    padding-left: .2rem;
    outline: none;
    height: 100%;
    width: 65%;
    border: transparent;
    background: #f8f8f8;
    border-left: 1px solid #e4e4e4;
  }

  .search-text {
    display: inline-block;
    width: 30%;
    background: #FFF;
  }

  .search-wrap {
    position: relative;
    margin: .1rem auto;
    width: 90%;
    height: 5vh;
    line-height: 5vh;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #E4E4E4;
    z-index: 2;
    overflow: hidden;
  }

  .product-list {
    position: fixed;
    top: 15.9vh;
    left: 0;
    right: 0;
    width: 100%;
    height: 77vh;
    overflow-y: scroll;
    background: rgba(255, 255, 255, 1);
    border: 1px solid #eee;
    z-index: 10;

    &>div {
      display: flex;
      height: 100%;
    }

    .productList-brand {
      margin-top: .93rem;
      width: 21%;
      height: 100%;
      overflow-y: scroll;
      border-right: 1px solid #ddd;
      box-shadow: 4px 0px 5px #e5e5e5;
      z-index: 2;

      li {
        padding: .2rem 0;

      }
    }
  }

  .productList-product {
    width: 79%;
    overflow-y: hidden;

    .thead {
      height: .98rem;
      align-items: center;
    }

    .tbody {
      height: 90%;
      overflow-y: scroll;

      table {
        width: 100%;
        border-spacing: 0;
        color: #666;

        tr {
          height: .8rem;
          line-height: .8rem;
        }
        tr:nth-child(odd) {
          background: rgba(228, 240, 255, .6);
        }

        tr:nth-child(even) {
          background: #fff;
        }

        td {
          border: 0px;
        }

      }
    }
  }
</style>
